<template>
    <view>
        <m-search v-model="value" @cancel="cancel" @confirm="confirmSearch" @clear="clearSearch"></m-search>
        <view class="m-search-layout" v-show="showQuickAccess">
            <view class="search-box">
                <view class="search-box-head" v-if="showRecentSearch">
                    <text>最近搜索</text>
                    <uni-icons type="trash" color="" size="24" @click="deleteRecentSearch" />
                </view>
                <view class="search-box-body m-search-uni-tags">
                    <uni-tag
                        v-for="(item, index) in recentSearchTags"
                        :text="item"
                        size="small"
                        circle
                        :custom-style="unitagStyle"
                        @click="tagClick(item)"
                    />
                </view>
            </view>
            <view class="search-box">
                <view class="search-box-head">
                    <text>最近热搜</text>
                </view>
                <view class="search-box-body m-search-uni-tags">
                    <uni-tag
                        v-for="(item, index) in recentHotSearchTags"
                        :text="item"
                        size="small"
                        circle
                        :custom-style="unitagStyle"
                        @click="tagClick(item)"
                    />
                </view>
            </view>
        </view>
        <view class="m-search-layout search-box" v-show="showSearch">
            <view class="search-box-head">
                <text>以下是”{{ keyword }}“的搜索结果</text>
            </view>
            <view class="search-box-body m-search-product-list">
                <m-page-water-fall-product-list
                    ref="mProductListRef"
                    :listFn="searchProductList"
                    @querySucess="querySuccess"
                ></m-page-water-fall-product-list>
            </view>
        </view>
        <view class="m-search-layout search-box" v-show="showRecomend">
            <view class="search-box-head">
                <text>热门推荐</text>
            </view>
            <view class="search-box-body m-search-product-list">
                <m-water-fall-product-list :products="recommendProducts"></m-water-fall-product-list>
            </view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import MSearch from '@/components/common/MSearch.vue'
import MWaterFallProductList from '@/components/business/MWaterFallProductList.vue'
import MPageWaterFallProductList from '@/components/business/MPageWaterFallProductList.vue'
import { onLoad } from '@dcloudio/uni-app'
import { SEARCH_CACHE } from '@/const/const'
import { getRecentHotSearch } from '@/api/home'
import { getProductList, getRecommendProductList } from '@/api/product'
const value = ref('')
const unitagStyle = ref(
    'margin-left: 20rpx;margin-bottom: 20rpx;background-color: #e5e5e5;border: none;color: black;padding: 20rpx;font-size: 26rpx;white-space:nowrap;display: inline-block;'
)
const mProductListRef = ref<InstanceType<typeof MPageWaterFallProductList> | null>(null)
const showSearch = ref(true)
const showQuickAccess = ref(false)
const showRecomend = ref(false)
const tagStyle = ref(' margin-left: 20rpx;margin-bottom: 20rpx;')
//搜索框
//-跳转到该页面，获取搜索参数
onLoad((query) => {
    value.value = query?.val
    if (query?.val != '') {
        setTimeout(confirmSearch)
    } else {
        showQuickAccess.value = true
        showRecomend.value = true
        showSearch.value = false
    }
})

const searchProducts = ref<Product[]>()
//-确认搜索
function confirmSearch() {
    mProductListRef.value?.reset()
}
//-搜索函数
function searchProductList(query: any) {
    query.keyword = value.value
    return getProductList(query)
}
//-搜索成功
const keyword = ref('')
function querySuccess(datas: any[]) {
    keyword.value = value.value
    showSearch.value = true
    showQuickAccess.value = false
    showRecomend.value = datas.length == 0
    let res = setLocalSearch(value.value)
    if (res) {
        recentSearchTags.value.push(value.value)
    }
}
//-清除搜索
function clearSearch() {
    showQuickAccess.value = true
    showRecomend.value = true
    showSearch.value = false
}
//-搜索取消
function cancel() {
    uni.navigateBack()
}
//最近搜索
const recentSearchTags = ref<string[]>([])
recentSearchTags.value = getLocalSearch()
//-清除最近搜索
function deleteRecentSearch() {
    recentSearchTags.value = []
    uni.removeStorageSync(SEARCH_CACHE)
}
const showRecentSearch = computed(() => {
    return recentSearchTags.value.length > 0
})
function getLocalSearch(): Array<string> {
    let res: Array<string> = []
    try {
        res = uni.getStorageSync(SEARCH_CACHE) || new Array<string>()
    } catch (error) {
        console.error(error)
    }
    return res || []
}
function setLocalSearch(data: string) {
    try {
        let sets: Array<string> = uni.getStorageSync(SEARCH_CACHE) || new Array<string>()
        if (sets.findIndex((v) => v == data.trim()) < 0) {
            sets.push(data)
            uni.setStorageSync(SEARCH_CACHE, sets)
            return true
        }
    } catch (error) {
        console.error(error)
    }
    return false
}
//最近热搜
const recentHotSearchTags = ref<string[]>()
getRecentHotSearch().then((res) => {
    recentHotSearchTags.value = res.data || []
})

//推荐商品
const recommendProducts = ref<Product[]>()
getRecommendProductList().then((res) => {
    recommendProducts.value = res.data
})
//点击tag
function tagClick(item: string) {
    value.value = item
    confirmSearch()
}
</script>

<style lang="scss" scoped>
.m-search-layout {
    margin-left: 20rpx;
    margin-right: 20rpx;
}
.search-box {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    .search-box-head {
        font-size: $uni-font-size-title;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .search-box-body {
        font-size: $uni-font-size-base;
        margin-top: 20rpx;
        margin-left: -20rpx;
    }
}
.recently-search {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.m-search-product-list {
    margin-left: 0rpx !important;
}
</style>
